<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@page import="com.framework.util.Const"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的久零币</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="format-detection" content="telephone=no" />
    <jsp:include page="/jsp/inc_head.jsp"></jsp:include>
    <style>
        [data-am-widget=tabs] {
            margin: 0;
        }
        .am-tabs-d2 .am-tabs-nav {
            background-color: #fff;
            border-bottom:2px solid #eee;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active {
            background-color: #fff;
            border-bottom: 2px solid #fd4c00;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active a {
            color: #fd4c00;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active:after {
            content:none;
        }
        .am-tabs-bd .am-tab-panel {
            padding: 0;
        }
        .am-tabs-bd {
            border: 0;
        }


        /******我的久零币********/
        .myjltop{
            padding:25px 0;
            background: #ff4e02;
            background: -moz-linear-gradient(left,  #ff4e02 0%, #ff6a18 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4e02), color-stop(100%,#ff6a18));
            background: -webkit-linear-gradient(leftleftleft,  #ff4e02 0%,#ff6a18 100%);
            background: -o-linear-gradient(leftleft,  #ff4e02 0%,#ff6a18 100%);
            background: -ms-linear-gradient(left,  #ff4e02 0%,#ff6a18 100%);
            background: linear-gradient(to right,  #ff4e02 0%,#ff6a18 100%);
            filter: progid:DXImageTransform.Microsoft.centertop( startColorstr='#ff4e02', endColorstr='#ff6a18',GradientType=0 );
            color:#fff;
            font-size:12px;
        }
        .moneyNUm{
            font-size:16px;
            color:#fff;
        }
        .xiaoyangjiao{
            font-size:12px;
        }
        .toTixian{
            font-size:12px;
            color:#fbfea5;
            border-bottom:1px solid #fbfea5;
            cursor:pointer;
        }
        .topbtn{
            padding:20px 12px;
            border-bottom:7px solid #eee;
        }
        .am-btn-chongzhi,
        .am-btn-chongzhi:hover,
        .am-btn-chongzhi:focus{
            border:1px solid #ff4e02;
            font-size:15px;
            color:#ff4e02;
            border-radius:4px;
            background-color:#fff;
        }
        .myjlbLie{
            padding:15px 0;
            border-bottom:1px solid #eee;
            font-size:13px;
            color:#5c5c5c
        }
        .midcolblack{
            color:#000;
        }
        .myjbPlus{
            color:#bad145;
        }
        .myjbminus{
            color:#ff9f0a;
        }
    </style>
</head>
<body>
<section class="am-g am-text-sm">
    <div class="am-u-sm-12 am-pad-none myjltop">
        <div class="am-u-sm-6 am-text-center am-pad-none" style="border-right:1px solid #fff;">
            久零币总额
            <div class="moneyNUm">
                <span class="xiaoyangjiao">￥</span><span id="totalAmount">0.00</span>
            </div>
        </div>
        <div class="am-u-sm-6 am-text-center am-pad-none">
            可提现
            <div class="moneyNUm">
                <span class="xiaoyangjiao">￥</span><span id="chargeAmount">0.00</span> <span class="toTixian" onClick="toWithdrawals();">提现</span>
            </div>
        </div>
    </div>
    <div class="am-u-sm-12 topbtn">
        <button type="button" class="am-btn am-btn-chongzhi am-btn-block" onClick="toChargeCoin();">充值</button>
    </div>
    <div class="am-u-sm-12 am-pad-none">
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2" data-am-tabs-noswipe="1">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active"><a href="[data-tab-panel-0]">全部</a></li>
                <li class=""><a href="[data-tab-panel-1]">收入</a></li>
                <li class=""><a href="[data-tab-panel-2]">支出</a></li>
            </ul>
            <div class="am-tabs-bd">
                <div id="panel0" data-tab-panel-0 class="am-tab-panel am-active">

                </div>
                <div id="panel1" data-tab-panel-1 class="am-tab-panel ">

                </div>
                <div id="panel2" data-tab-panel-2 class="am-tab-panel ">

                </div>
            </div>
        </div>
    </div>
</section>

<script>
    var ajaxpath="${pageContext.request.contextPath}";
    $(function(){
        loadJiulingCoinInfo();
    });

    //跳转久零币充值
    function toChargeCoin(){
        window.location.href = ajaxpath+"/jsp/client/toChargeCoin_90_orange.jsp?guid="+ new Date();
    }

    function toWithdrawals(){
        window.location.href = ajaxpath+"/jsp/client/withDrawals_90_orange.jsp?guid="+ new Date();
    }

    //加载久零币信息
    function loadJiulingCoinInfo(){
        var url=ajaxpath+"/coin/doQueryByOpenId.do";
        $.get(url,function(data){
                $("#chargeAmount").html(data.chargeAmount);
                $("#totalAmount").html(data.totalAmount);
        });
    }

    //加载久零币流水
    function loadCoinFlow(){
        var url=ajaxpath+"/coin/getCoinFlowByOpenId.do?state=0";
        $.get(url,function(data){
            var html1='';
            var html2='';
            var html3='';
            $.each(data,function(){
               var  html_='<div class="am-u-sm-12 am-pad-none myjlbLie">'
                +'<div class="am-u-sm-12 am-pad-none">'
                +'<div class="am-u-sm-3 am-text-right am-pad-none">'
                +'兑换流水号'
                +'</div>'
                +'<div class="am-u-sm-9 midcolblack">'
                +this.serialNum
                +'</div>'
                +'</div>'
                +'<div class="am-u-sm-12 am-pad-none">'
                +'<div class="am-u-sm-3 am-text-right am-pad-none">日期</div>'
                +'<div class="am-u-sm-4 midcolblack">'+this.createTime+'</div>'
                +'<div class="am-u-sm-5 am-text-right">'
                +'<span class="myjbPlus">'+this.amount+'</span>'
                +'</div></div>'
                +'<div class="am-u-sm-12 am-pad-none">'
                +'<div class="am-u-sm-3 am-text-right am-pad-none">来源/用途</div>'
                +'<div class="am-u-sm-9 midcolblack">'+this.source+'</div>'
                +'</div></div>';
                html1+=html_;
                if(data.state==1){
                    html2+=html_;
                }else if(data.state==2){
                    html3+=html_;
                }
            });
            $("#panel0").html(html1);
            $("#panel1").html(html2);
            $("#panel2").html(html3);
        });
    }
</script>
</body>
</html>

